<template>
	<view>
		<view class="SearchOrder">
			<input class="input" focus placeholder="输入订单编号" @input="search"/>
		</view>
		<view  v-if="searchmsg"><order_list :list-data='OrderAll'></order_list></view>
		<!-- <order_list :list-data='searchmsg'></order_list> -->
	 <el-tabs v-model="activeName" @tab-click="handleClick"  class="equal-width-tabs" v-else>
	    <el-tab-pane label="全部" name="0"><order_list :list-data='OrderAll'></order_list></el-tab-pane>
	    <el-tab-pane label="已预定" name="1"><order_list :list-data='OrderAll'></order_list></el-tab-pane>
	    <el-tab-pane label="已完成" name="2"><order_list :list-data='OrderAll'></order_list></el-tab-pane>
	    <el-tab-pane label="退款" name="3"><order_list :list-data='OrderAll'></order_list></el-tab-pane>
	  </el-tabs>
	</view>
	
</template>

<script>
	import order_list from "../../pages/components/order_list.vue"
	export default {
		components :{
			order_list,
		},
		data() {
			return{
				activeName: '0',
				abc:'',
				user_info:{
					"token":'',
					"userId":'',
					"orderStatus":'',
				},
				searchmsg:'',
				OrderAll:[],
				      };
		},
		
		onLoad:function() {
			this.GetAllOrder();
		},
		methods: {
		      handleClick(tab, event) {
				  console.log("发送目录请求");
		        console.log(tab.name);
				this.user_info.orderStatus=tab.name;
				let that=this;
				if(tab.name==0){
					uni.request({
					 	url:'http://192.168.2.218:8086/business/user/orderList',
					 	method:'POST',
						header: {
						        'token': this.user_info.token // 在这里设置请求头
						    },
						data:{
							"userId":this.user_info.userId,
						},
					 	// 返回成功的结果
					 	success(res){	
						that.OrderAll = res.data.data;	
						},
					 	fail() {
					 		console.log("获取失败")
					 	},
					 })
				}
				else{
					this.GetAllOrder();
				}
			
		      },
			  search(msg){
				  this.searchmsg=msg.detail.value,
				  console.log(this.searchmsg)
			  },
			  GetAllOrder(){
				  let that=this;
				  var gettoken=uni.getStorageSync('login-user').token;
				  var loginUser = uni.getStorageSync('login-user').userId;

				  this.user_info.token=gettoken;
				  this.user_info.userId=loginUser;
				uni.request({
				 	url:'http://192.168.2.218:8086/business/user/orderList',
				 	method:'POST',
					header: {
					        'token': this.user_info.token // 在这里设置请求头
					    },
					data:{
						"userId":this.user_info.userId,
						"orderStatus":this.user_info.orderStatus,
					},
				 	// 返回成功的结果
				 	success(res){
					that.OrderAll = res.data.data;			
					},
				 	fail() {
				 		console.log("获取失败")
				 	},
				 })
			  }
		    }
	}

</script>

<style>
	::v-deep.equal-width-tabs .el-tabs__header {
	width: 100%;
	margin-left: 0px;
	display: flex;
	justify-content: space-around; /* 保持不变 */	  
	}
	
	::v-deep .equal-width-tabs .el-tabs__item {
	  flex-grow: 1;
	  text-align: center; /* 确保标签文本居中 */
	  max-width: none !important; /* 重写 Element UI 的最大宽度限制 */
	}
	::v-deep .el-tabs__item.is-active {
	    color: #15cbf3;
	  }
	  
	::v-deep .el-icon-arrow-left {
	      color: white;
	    }
	::v-deep .el-icon-arrow-right {
	      color: white;
	    }
	::v-deep .el-tabs__nav-wrap::after {
	      height: 0;
	    }
	::v-deep .el-tabs__active-bar {
	      background-color: #15cbf3;
	    }

	
	.SearchOrder{
		padding:10px 20px ;
		margin: 10px 20px;
		box-sizing:border-box;
		border-radius: 100px;
		background-color: rgba(0, 0, 0, 0.03);
		
	}
	
	.text_line{
			  
			/*盒子下边距，这里用来指定下划线距离文字的高度*/
			padding-bottom: 15px;
			
			/*设定一个2px，实线*/
	  border-bottom: 2px solid #228B22; 
	}
</style>